// 积分规则
<template>
  <el-drawer
    v-model="open"
    title="规则设置"
    :with-header="true"
    size="90%"
    class="join-class-drawer"
    :close-on-click-modal="false"
    :before-close="closeW"
  >
    <div class="content">
      <el-alert type="warning" :closable="false">
        <template v-slot:title>
          规则提示
          <br />
          1.修改规则，不影响历史已经产生的积分记录，只影响未来的积分记录。
          <br />
          2.若存在误操作导致积分发放有误，可通过【学员积分—发放积分】手动进行积分的增加或扣减。
        </template>
      </el-alert>
      <div style="margin-bottom: 15px" />
      <el-form ref="rulesRef" :model="form" label-width="auto">
        <el-form-item
          label="积分名称"
          prop="name"
          :rules="[
            {
              required: true,
              message: '请输入积分名称',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入积分名称"
            style="width: 320px"
          />
        </el-form-item>
        <el-card shadow="never">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              积分规则
            </div>
          </template>
          <el-table class="quotation" :data="form.ruleList" style="width: 100%">
            <el-table-column prop="name" label="规则名称"> </el-table-column>
            <el-table-column prop="typeName" label="积分类型"></el-table-column>
            <el-table-column prop="num" label="积分数量" width="130">
              <template #default="scope">
                <el-form-item :prop="`form.ruleList.${scope.$index}.num`">
                  <el-input-number
                    v-model="scope.row.num"
                    :min="0"
                    controls-position="right"
                    :precision="0"
                  >
                    <template #prefix>
                      <span>{{ scope.row.type === "1" ? "+" : "-" }}</span>
                    </template>
                  </el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeW">取消</el-button>
        <el-button
          type="primary"
          @click="handleSubmit()"
          :disabled="btnDisabled"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { getRulesAPI, saveRulesAPI } from "@/api/marketing/points";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const open = ref(false);
const btnDisabled = ref(false);
const data = reactive({
  form: {
    id: null,
    name: null,
    ruleList: [
      { name: "报名奖励", type: "1", typeName: "奖励", num: 0 },
      { name: "点名奖励", type: "1", typeName: "奖励", num: 0 },
      { name: "评论奖励", type: "1", typeName: "奖励", num: 0 },
    ],
  },
});

const { form } = toRefs(data);

// 事件

function openW() {
  getRules();
  open.value = true;
}

function closeW() {
  open.value = false;
  proxy.resetForm("rulesRef");
}

function handleSubmit() {
  btnDisabled.value = true;
  proxy.$refs["rulesRef"].validate((valid) => {
    if (valid) {
      let map = {};
      map.id = form.value.id;
      map.name = form.value.name;
      map.attr1 = form.value.ruleList[0].num;
      map.attr2 = form.value.ruleList[1].num;
      map.attr3 = form.value.ruleList[2].num;
      saveRules(map);
    } else {
      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
      btnDisabled.value = false;
    }
  });
}

// 方法---------------------------------------------------------------------------------------------------------
function getRules() {
  loading.value = true;
  getRulesAPI({}).then((response) => {
    if (response.data) {
      const { id, name, attr1, attr2, attr3 } = response.data;
      form.value.id = id;
      form.value.name = name;
      form.value.ruleList[0].num = attr1;
      form.value.ruleList[1].num = attr2;
      form.value.ruleList[2].num = attr3;
    }
    loading.value = false;
  });
}

function saveRules(map) {
  loading.value = true;
  saveRulesAPI(map).then((response) => {
    proxy.$modal.msgSuccess("规则设置保存成功");
    closeW();
    loading.value = false;
    btnDisabled.value = false;
  });
}
defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
